<template>
    <div  id="trianDetailBox">
        <el-container>
            <el-header style="height:100px">
                <el-row class="end" style="width:95%;margin-top:25px">
                    <el-button type="primary" size="mini" @click="goBack">返回</el-button>
                </el-row>
                <div class="imgCol">
                    <div style="width:95%" ><el-divider ></el-divider></div>
                </div>
            </el-header>
            <el-main>
                <div style="margin-left:20px">
                    <el-row>
                        <i class="iconfont iconclass" style="font-size:25px;color:#409EFF"></i>
                        <span style="color:#409EFF">基本信息</span>
                    </el-row>
                    <div style="margin-left:20px">
                        <el-row style="margin-top:10px">
                            <i class="el-icon-postcard" style="color:#409EFF"></i> 
                            <span class="basdInfoWords">培训名称：{{trainInfo.name}}</span>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <i class="el-icon-sell"  style="color:#409EFF"></i>
                            <span class="basdInfoWords">发布时间：{{trainInfo.publicTime}}</span>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <i class="iconfont iconlianxiwomen-copy"  style="color:#409EFF"></i>
                            <span class="basdInfoWords">联系方式：{{trainInfo.contact}}</span>
                        </el-row>
                    </div>
                </div>
                <div style="margin-left:20px;margin-top:40px">
                    <el-row>
                        <i class="iconfont iconxianshiqujingjizhibiao" style="font-size:25px;color:#E6A23C"></i>
                        <span style="color:#E6A23C">重要指标</span>
                    </el-row>
                    <div style="margin-left:20px;margin-right:20px">
                        <el-table 
                            style="margin-top:10px"
                            :data="zhiBiaoData"
                            stripe
                            border
                        >
                            <el-table-column
                                prop="clickCount"
                                label="点击量"
                                >
                                <template slot-scope="scope">
                                    <i class="iconfont icondianji" style="color:#E6A23C;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.clickCount }}</span>
                                </template>
                            </el-table-column>
                             <el-table-column
                                prop="enrollCount"
                                label="报名量"
                              >
                                <template slot-scope="scope">
                                    <i class="iconfont iconbaoming" style="color:#E6A23C;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.enrollCount }}</span>
                                </template>
                            </el-table-column>
                             <!-- <el-table-column
                                prop="save"
                                label="收藏量"
                               >
                                <template slot-scope="scope">
                                    <i class="iconfont iconhuabanfuben" style="color:#E6A23C;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.save }}</span>
                                </template>
                            </el-table-column> -->
                             <el-table-column
                                prop="shareCount"
                                label="分享量"
                                >
                                <template slot-scope="scope">
                                    <i class="iconfont iconfenxiang" style="color:#E6A23C;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.shareCount }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div style="margin-left:20px;margin-top:40px;margin-bottom:20px;">
                    <el-row>
                        <i class="iconfont icon43leijibaoming" style="font-size:25px;color:#67C23A"></i>
                        <span style="color:#67C23A">报名情况</span>
                    </el-row>
                    <div style="margin-left:20px;margin-right:20px">
                        <el-table 
                            style="margin-top:10px"
                            :data="enrollData"
                            stripe
                            border
                        >
                            <el-table-column
                                prop="username"
                                label="ID"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="realname"
                                label="姓名"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="userId"
                                label="身份证号码"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="contact"
                                label="联系方式"
                            >
                                <template slot-scope="scope">
                                    <i class="iconfont iconlianxiwomen-copy" style="color:#67C23A;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.contact }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="报名时间"
                            >
                                <template slot-scope="scope">
                                    <i class="el-icon-time" style="color:#67C23A;font-size:20px"></i>
                                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- <div style="margin-bottom:10px;margin-top:10px">
                       
                        <el-pagination
                            background
                            layout="total,prev, pager, next"
                            :total="pageInfo.totall">
                        </el-pagination>
                    </div> -->
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            trainClassId:'',
            trainInfo:{},
            zhiBiaoData:[],
            enrollData:[],
        }
    },
    mounted(){
        var body=document.getElementById('trianDetailBox');
        var height=document.documentElement.clientHeight-120;
        body.style.height=height+'px';
        console.log(height);
        
        this.trainClassId=this.$route.query.id;
        console.log("培训课次id:");
        console.log(this.trainClassId);

        this.getBaseInfo(this.trainClassId);
        this.getImportInfo(this.trainClassId);
        this.getEnrollInfo(this.trainClassId);

    },
    methods:{
        goBack(){
            this.$router.go(-1);
        },
        //获取基本信息
        getBaseInfo(id){
            var URL=this.IP+'/train/trainClassTimeBasicInformation';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    trainClassTimeId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.trainInfo=response.data.data;
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取重要指标
        getImportInfo(id){
            var URL=this.IP+'/train/trainClassTimeIndex';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    trainClassTimeId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.zhiBiaoData=[response.data.data];
                   console.log(this.zhiBiaoData);
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        },
        //获取报名情况
        getEnrollInfo(id){
            var URL=this.IP+'/train/trainClassCondition';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                    trainClassId:id
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.enrollData=response.data.data;
                    this.pageInfo
                }else{
                  console.log(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }

    }
}
</script>
<style>
#trianDetailBox{
/* height:600px; */
background-color:#fff;
margin:15px;
border-radius:5px
}
.el-header,.el-main,.el-footer,.el-aside{
    padding: 0px;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
.end{
    display: flex;
    justify-content: flex-end;
}
.pointer{
    cursor:pointer;
}
.basdInfoWords{
    font-size:14px;
    /* color:rgb(105, 110, 125) */
}
</style>